<template>
  <div>
    <!-- 允许自定义组件在使用 v-model 时定制 prop 和 event。 -->
    <input type="text" :value="text" @input="$emit('changeVal', $event.target.value)">{{text}}
  </div>
</template>

<script>
export default {
  /**
   * 注意：
   *    1. 使用:value，而不是v-model
   *    2. changeVal与model.event对应，名称自定义
   */
  model: {
    prop: 'text',   // 指定props中对应的字段
    event: 'changeVal'    // 事件触发时指定自定义事件
  },
  props: {
    text: {
      type: String,
      default: ''
    }
  }
}
</script>
